import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, message, Popconfirm, Space } from 'antd';
import ProCard from '@ant-design/pro-card';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';

import styles from './index.less';
import { useRequest } from '@/hooks';
import { ProColumns } from '@ant-design/pro-table/lib/typing';
import { ProFormColumnsType } from '@ant-design/pro-form/lib/components/SchemaForm';
import { ProCoreActionType } from '@ant-design/pro-utils/lib/typing';

export default () => {

    const tabActiveKeyState = React.useState<string>('base');
    const [selectedRow, selectedRowChange] = React.useState<any>();


    const formRef = React.useRef<ProFormInstance>();
    const columns: ProColumns[] & ProFormColumnsType[] = [
        {
            dataIndex: 'id',
            hideInTable: true,
            hideInSearch: true,
            formItemProps: {
                hidden: true,
            }
        },
        {
            hideInSearch: true,
            hideInForm: true,
            sorter: true,
            title: '序号',
            render: (_: any, __: any, index: any) => index + 1
        },
        {
            key: 'username',
            title: '用户名',
            sorter: true,
            dataIndex: 'username',
            formItemProps: {
                rules: [{required: true}]
            }
        },
        {
            key: 'role',
            title: '角色',
            hideInSearch: true,
            dataIndex: 'role',
            fieldProps: {
                options: [
                    {
                        value: 1,
                        label: '超级管理员',
                    },
                    {
                        value: 2,
                        label: '科室主任',
                    },
                    {
                        value: 3,
                        label: '主治医生',
                    },
                ],
            },
            formItemProps: {
                rules: [{required: true}],
            },
            valueType: 'select',
            valueEnum: {
                1: '超级管理员',
                2: '科室主任',
                3: '主治医生',
            },
        },
        {
            key: 'password',
            title: '登录密码',
            hideInSearch: true,
            dataIndex: 'password',
            formItemProps: {
                rules: [{required: true}]
            }
        },
        {
            key: 'name',
            title: '医生姓名',
            sorter: true,
            dataIndex: 'name',
        },
        {
            key: 'hospital',
            title: '所属医院',
            sorter: true,
            dataIndex: 'hospital',
        },
        {
            title: '操作',
            fixed: 'right',
            width: 180,
            hideInForm: true,
            hideInSearch: true,
            render: (_: React.ReactNode, entity: any, __: number, action: ProCoreActionType | undefined) => {
                return <Space>
                    <a style={{color: 'darkseagreen'}} onClick={() => {
                        selectedRowChange(entity)
                        tabActiveKeyState[1]('edit')
                    }}>编辑信息</a>
                    <Popconfirm
                        title='是否确认删除？'
                        onConfirm={async () => {
                            await useRequest({
                                url: `/subject/${entity.id}`,
                                method: 'DELETE',
                            })
                            message.success({
                                content: '删除成功',
                                duration: 0.5,
                                key: 0x11
                            })
                            action?.reload()
                        }}>
                        <a type='link' style={{color: 'red'}}>删除</a>
                    </Popconfirm>
                </Space>
            }
        }
    ];

    return <PageContainer
        title='医生账号管理'
        subTitle='查看、修改医生账号信息'
        className={styles.pageContainer}
        tabList={[{tab: '基本信息', key: 'base'}, {tab: '信息编辑', key: 'edit'}]}
        tabActiveKey={tabActiveKeyState[0]}
        extra={[
            <Button key='edit' type='primary' onClick={() => {
                selectedRowChange(null)
                tabActiveKeyState[1]('edit');
            }}>
                添加
            </Button>
        ]}
        footer={tabActiveKeyState[0] === 'edit' ? [
            <Button key='edit' type='primary' onClick={async () => {
                const fieldsValue = await formRef.current?.validateFieldsReturnFormatValue?.()
                message.loading({
                    key: 0x11,
                    content: '保存中....'
                })
                await useRequest({
                    url: '/subject',
                    method: 'POST',
                    data: fieldsValue
                })
                message.success({
                    content: '修改成功',
                    key: 0x11,
                    duration: 0.8
                })
            }}>确认 </Button>,
        ] : []}
        onTabChange={async (e) => {
            tabActiveKeyState[1](e);
        }}>
        {
            tabActiveKeyState[0] === 'base' &&
            <ProTable
                columns={columns}
                pagination={false}
                request={async (params) => {
                    Object.entries(params).forEach(([key, value]) => {
                        value === '' && delete params[key]
                    })
                    const {data} = await useRequest({
                        url: '/subject',
                        params: params
                    })
                    return {
                        data: data,
                        total: data.length
                    }
                }}
                bordered
                rowKey='id'
            />
        }
        {
            tabActiveKeyState[0] === 'edit' &&
            <Space direction='vertical' className={styles.editTab}>
                <ProCard title='信息编辑' className={styles.card}>
                    <BetaSchemaForm
                        formRef={formRef}
                        className={styles.form}
                        layout='horizontal'
                        labelCol={{span: 5}}
                        submitter={false}
                        initialValues={selectedRow}
                        columns={columns}
                    />
                </ProCard>
            </Space>
        }
    </PageContainer>;
}
